import React, {useState} from "react"
import {Button, Form, Input, message, Modal, ModalProps} from 'antd';
import {MAX_PASSWORD_LENGTH, MIN_PASSWORD_LENGTH} from "../apis/EmployeeApi";
import {logOut, updatePassword} from "../apis/AuthorizationApi";
import {Response} from "@zxy-cn/fetcher";
import {ProblemDetail} from "../types/BasicModels";
import employeeAuthorizationStore from "../store/EmployeeAuthorizationStore";

export interface UpdatePasswordModalProps extends ModalProps {

}

type UpdatePasswordFormData = {
    password: string
    newPassword: string
    confirmNewPassword: string
}

const UpdatePasswordModal: React.FC<UpdatePasswordModalProps> = (props) => {
    let [form] = Form.useForm();
    const [loading, setLoading] = useState(false)
    let [messageApi, messageHolder] = message.useMessage();
    return (
        <>
            {messageHolder}
            <Modal {...props} title={"修改密码"} destroyOnClose={true} maskClosable={false} footer={null}
                   keyboard={false}>
                <Form<UpdatePasswordFormData> preserve={false} layout={"vertical"} labelAlign={"right"} form={form}
                                              onFinish={async values => {
                                                  try {
                                                      setLoading(true)
                                                      await updatePassword({password: values.password, newPassword: values.newPassword})
                                                      await logOut()
                                                      await employeeAuthorizationStore.logOut()
                                                  } catch (e) {
                                                      let response = e as Response<ProblemDetail>;
                                                      if (response.status === 400 && response.data.detail === "INVALID_PASSWORD") {
                                                          messageApi.error("原密码错误")
                                                      }
                                                  } finally {
                                                      setLoading(false)
                                                  }
                                              }}>
                    <Form.Item name={"password"} label={"原密码"} rules={[{required: true}]}>
                        <Input.Password />
                    </Form.Item>
                    <Form.Item name={"newPassword"} label={"新密码"} validateTrigger={"onBlur"}
                               rules={[{required: true,}, {min: MIN_PASSWORD_LENGTH, max: MAX_PASSWORD_LENGTH}]}>
                        <Input.Password/>
                    </Form.Item>
                    <Form.Item name={"confirmNewPassword"} label={"确认密码"} validateTrigger={"onBlur"}
                               rules={[{required: true, message: "请再次输入新密码"}, {
                                   validator: async (rule, value) => {
                                       if (value !== form.getFieldValue("newPassword")) {
                                           throw new Error("两次密码输入不一致")
                                       }
                                   }
                               }]}>
                        <Input.Password />
                    </Form.Item>
                    <div style={{display: "flex", justifyContent: "end"}}>
                        <Button loading={loading} type={"primary"} onClick={() => {
                            form.submit();
                        }}>确认修改</Button>
                    </div>
                </Form>

            </Modal>
        </>
    )
}

export default UpdatePasswordModal
